<template>
	<view class="hx-store">
		<!-- 头部 -->
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<view class="ikz-top-bg">
			<image class="ikz-top-bg-img" :src="service_img"></image>
		</view>
		<view class="title_txt">

			<view class="shouhuo" @click="goaddress">
				<image src="/static/mai/shdz.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
				<view class="shtxt" v-if="!address_default">
					我的收货地址
				</view>
				<view class="shtxt" v-else>
					{{address_default.detail}}
				</view>
				<image src="/static/mai/right_icon.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
			</view>
			<view class="miantxt">
				跑跑乐
			</view>
		</view>
		<view class="ikz-banner-box">
			<ikz-banner :show-data="banner_data" :css-data="banner_css"></ikz-banner>
		</view>

		<swiper class="swiper" :indicator-dots="true">
			<swiper-item>
				<view class="grid">
					<view class="grid-item-box" v-for="(item, index) in list1" :key="index" @click="tourl(item,index)">
						<image :src="'https://1008.dev.jiangkukeji.cn'+item.image" class="image" mode="aspectFill" />
						<text class="text">{{ item.name }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="tuijian">
			<view class="titletxt">
				推荐商家
			</view>
			<image src="/static/mai/sahngjia.png"
				style="width: 60rpx;height: 8rpx;margin-left: 38rpx;position: relative;top: -14rpx;" mode=""></image>
		</view>

		<scroll-view scroll-y :style="{ height: windowHeight }" @scrolltolower="onreachBottom">
			<view class="mainbox">
				<view class="itembox" v-for="(i,k) in recommend_data" :key="k" @click="todetails(i)">
					<image :src="'https://1008.dev.jiangkukeji.cn'+ i.logo_image"
						style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" mode=""></image>
					<view class="ri-box">
						<view class="titlebox">
							<view class="titletxt">
								{{i.name}}
							</view>
							<image src="/static/mai/yyz.png" style="width: 86rpx;height: 33rpx;" mode=""></image>
						</view>

						<view class="shujubox">
							<view class="yue">
								月售{{i.sale_count}}
							</view>
							<view class="renjun">
								人均56
							</view>
						</view>

						<view class="feiyongbox">
							<view class="qisong">
								起送￥20
							</view>
							<view class="peisong">
								配送费 ￥20
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
	var app = getApp( );
	import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue';
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzBanner from '@/pages/Component/Public/Banner/public/banner/banner.vue';
	import ikz from '@/pages/Common/tools.js';


	export default {
		components: {
			ikzTabbar,
			ikzLoading,
			ikzBanner
		},
		data( ) {
			return {
				tabbar_Data: {
					type: 0,
					list: [ ]
				},
				id: 0,
				loading_css: {
					display: 'flex',
				},
				service_img: '/static/index/bg.png',
				banner_data: {
					ban_page: 2
				},
				apply_receive_image_show: 1,
				banner_css: {
					margin_top: 0
				},
				list: [ {
						Image: '/static/mai/tsxc.png',
						text: '特色小吃',
						url: '/pages/Component/Module/takeaway/apply/index/index?title=' + '特色小吃'
					},
					{
						Image: '/static/mai/xyst.png',
						text: '校园食堂'
					},
					{
						Image: '/static/mai/csbl.png',
						text: '超市便利'
					},
					{
						Image: '/static/mai/ncyp.png',
						text: '奶茶饮品'
					},
					{
						Image: '/static/mai/hanbao.png',
						text: '蛋糕烘焙'
					},
					{
						Image: '/static/mai/naicha.png',
						text: '奶茶饮品'
					},
					{
						Image: '/static/mai/qssl.png',
						text: '轻食沙拉'
					}
				],
				list1: [ ],
				windowHeight: 0,
				address_default: '',
				recommend_data: [ ],
				remPage: 1,
			}
		},
		onLoad( ) {
			this.homeInfo( res => {
				this.loading_css.display = 'none';
			} );
			var _this = this
			uni.getSystemInfo( {
				success: function( res ) {
					_this.windowHeight = res.windowHeight - 542 + 'px';
					console.log( res, '屏幕高度' );
				}
			} )
		},
		onShow( ) {
			uni.hideTabBar( )
			this.tabbar_Data.list = app.globalData.tabBarInfo
			this.tabbar_Data.type = app.globalData.tabBarInfo.length - 3

			this.address_default = app.globalData.user_address.address_default;
			this.destination = this.address_default.id;

			this.getRecommend( )
			this.getfenlei( )
			this.bannerlist()
		},
		onPullDownRefresh( ) {
			this.homeInfo( res => {
				uni.stopPullDownRefresh( );
			} );
			this.getRecommend( )
		},
		methods: {
			bannerlist(){
				var path = '/index/carousel';
				var data = {};
				ikz.get( path, data, res => {
					console.log(res,'轮播图');
					if ( res.data.code == 1) {
						this.banner_data = res.data.data
					} else {
						uni.showModal( {
							title: '提示',
							content: '服务器繁忙，请稍后再试',
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			getfenlei( ) {
				var path = '/xyb/supermarket/Index/Index';
				var data = {
					token: uni.getStorageSync( 'local_user_session' ),
					agent_id: uni.getStorageSync( 'default_agent' ).id || ''
				}
				ikz.post( path, data, res => {
					console.log( res, 'ssssss' );
					if ( res.data.code == 1 ) {
						this.list1 = res.data.data.supermarket_category_list

					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			// 获取推荐商家
			getRecommend( ) {
				var path = '/xyb/supermarket/index/businsess_list';
				var data = {
					recommend: 1,
					page: this.remPage,
					limit: 10
				};
				ikz.requestPost( path, data, res => {
					if ( res.data.code ) {
						let list = res.data.data.data
						this.remHasMore = this.remPage < res.data.data.total / 10 ? true : false
						this.recommend_data = this.remPage === 1 ? list : [ ...this.recommend_data, ...list ];
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
			tourl( item, index ) {
				console.log( item, index, '每一项' );
				uni.navigateTo( {
					url: '/pages/Component/Module/takeaway/apply/index/index?title=' + item.name +'&id='+item.id 
				} )
			},
			//我的地址
			goaddress( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/Address/Program/myAddress/index'
				} )
			},
			onreachBottom( e ) {
				// console.log( e, 'eee' );
				this.$refs.storeList.onBottom( )
			},
			todetails(item){
				uni.navigateTo( {
					url: '/pages/Component/Module/takeaway/apply/shangdetails/shangdetails?id='+item.id
				} )
			},
			//获取首页信息 
			homeInfo( fn ) {
				var path = '/xyb/mp_weixin_home/index';
				var url = app.globalData.adminPath + path;
				var _that = this;
				uni.request( {
					url: url,
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						"agent_id": uni.getStorageSync( 'default_agent' ).id || ''
					},
					method: 'POST',
					success: function( res ) {
						if ( res.data.code == 1 ) {
							_that.apply_receive_image_show = res.data.data.apply_receive_image_show;
							_that.$forceUpdate( );
						} else {
							uni.showModal( {
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								success: function( res ) {}
							} );
						}
						fn( );
					},
					fail: function( res ) {
						//调用接口失败或回传失败
						uni.showModal( {
							title: '服务器繁忙',
							content: '服务器繁忙或网络不稳定，请稍后再试！'
						} )
					},
				} )
			},
			scrolltolower( e ) {
				if ( this.remHasMore ) {
					this.remPage += 1
					this.getRecommend( )
				}
			}
		}
	}
</script>

<style lang="scss">
	//主题颜色
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;

	.add {
		position: fixed;
		right: 60upx;
		top: 300upx;
		z-index: 999;
	}



	page {
		background: #f5f5f5;
	}

	.hx-store {


		.ikz-top-bg {
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: -1;
		}

		.ikz-top-bg-img {
			width: 750rpx;
			height: 430rpx;
		}

		.ikz-banner-box {
			position: relative;
			width: 95%;
			margin: 20rpx auto 0px;

		}

		.title_txt {
			width: 100%;
			height: 48rpx;
			margin: 110rpx auto 0px;
			z-index: 2;
			display: flex;
			align-items: center;

			.shouhuo {
				width: 218rpx;
				// height: 48rpx;
				min-height: 38rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.shtxt {
					width: 156rpx;
					min-height: 38rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					text-align: left;
					margin-left: 8rpx;
				}
			}

			.miantxt {
				width: 96rpx;
				height: 48rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #067CFF;
				text-align: center;
				margin-left: 70rpx;
			}
		}

		.swiper {
			width: 690rpx;
			height: 365rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 40rpx auto;
			padding: 20rpx 24rpx;
			box-sizing: border-box;

			.grid {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;


				.grid-item-box {
					width: 120rpx;
					height: 144rpx;
					// flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.image {
						width: 96rpx;
						height: 96rpx;
					}

					.text {
						font-size: 14px;
						margin-top: 5px;
					}
				}
			}

		}

		.tuijian {
			width: 100%;
			height: 48rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.titletxt {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: left;
			}
		}

		.mainbox {
			width: 100%;
			padding: 0 30rpx 30rpx 30rpx;
			box-sizing: border-box;

			.itembox {
				width: 672rpx;
				height: 206rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ri-box {
					width: 448rpx;
					height: 170rpx;

					.titlebox {
						width: 100%;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.titletxt {
							width: 366rpx;
							height: 40rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #222222;
							text-align: left;
						}
					}

					.shujubox {
						width: 100%;
						height: 36rpx;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.yue {
							font-weight: 400;
							font-size: 24rpx;
							color: #FF4F21;
							text-align: left;
							line-height: 36rpx;
						}

						.renjun {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							text-align: left;
							line-height: 36rpx;
							margin-left: 22rpx;
						}
					}

					.feiyongbox {
						width: 100%;
						height: 36rpx;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.qisong {
							font-weight: 400;
							font-size: 24rpx;
							color: #222222;
							text-align: left;
							line-height: 36rpx;
						}

						.peisong {
							font-weight: 400;
							font-size: 24rpx;
							color: #222222;
							text-align: left;
							line-height: 36rpx;
							margin-left: 34rpx;
						}
					}
				}
			}


		}
	}
</style>